/**
* 切换天地图背景地图：
* 卫星图片
* 街道
* 地形
* 2022-04-15 by fearwall
**/

<template>
  <div>
    <div id="map" class="map">
      <div >
      <button @click="change_img" class="btn">卫星图</button>
      <button @click="change_vec" class="btn">街道图</button>
      <button @click="change_ter" class="btn">地形图</button>
      </div>
    </div>

  </div>
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import {fromLonLat} from 'ol/proj.js';
export default {
  name: 'app',
  data () {
    return {
      map: null,
      map_img:null,
      map_vec:null,
      map_ter:null,
    }
  },
  mounted () {
    var view =new View({
      center: fromLonLat([115.87,37.82]),
      zoom: 12
    })
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
          })
        }),
        new TileLayer({
        source: new XYZ({
          url:  'http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=406d2b04b58d2d49366047643dcc5f12'
        })
       })
       ],
      view: view
    })
  },

  methods:{
    //天地图卫星图、天地图标识
    change_img (){
      var img = new TileLayer({
        source: new XYZ({
          url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
        })
      });
      var name = new TileLayer({
        source: new XYZ({
          url:  'http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=406d2b04b58d2d49366047643dcc5f12'
        })
      });

      this.map.addLayer(img);
      this.map.addLayer(name);
    },
    //显示卫星图
    change_vec(){
      var map_cva= new TileLayer({
        source: new XYZ({
          url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      var map_vec =new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });

      this.map.addLayer(map_vec);
      this.map.addLayer(map_cva);
      //console.log(this.map.getLayers());
    },
    //显示矢量图
    change_ter(){
      var map_ter =new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      var map_cta =new TileLayer({
        source: new XYZ({
          url:  "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      this.map.addLayer(map_ter);
      this.map.addLayer(map_cta);
    }
  }

}
</script>

<style>
.map{
  width: 1920px;
  height:960px;
}
.btn{
  margin: 10px;
  padding: 10px;
}
</style>
